import React, { useRef, useState, useEffect } from 'react';
// styles
import styles from './index.less';
// 自定义组件
// 自定义工具和方法
import { transPointData } from './transData';

export default () => {
  const [pointsArr, setPointsArr] = useState([
    { name: '123123', positions: [11, 118], color: '#ff0000' },
    { name: '123123', positions: [13, 118], color: '#ff0000' },
    { name: '123123', positions: [10, 118], color: '#6bffff' },
    { name: '123123', positions: [11.4, 111], color: '#ff0000' },
    { name: '123123', positions: [12, 119], color: '#ff0000' },
    { name: '123123', positions: [12.3, 108], color: '#ff0000' },
    { name: '123123', positions: [12, 138], color: '#6bffff' },
    { name: '123123', positions: [11, 128], color: '#ff0000' },
    { name: '123123', positions: [14, 118], color: '#ff0000' },
    { name: '123123', positions: [13.2, 128], color: '#ff0000' },
    { name: '123123', positions: [13.1, 108], color: '#ff0000' },
  ]);
  // 清除图层
  const clearFun = () => {
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'clearLayer',
              groupId: 'MapGroup',
              layerId: 'pointLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('清除完成了');?
      },
    );
  };
  // 绘制图层
  const drawFun = () => {
    let drawData = transPointData(pointsArr);
    console.log('drawData', drawData);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'draw',
          payload: [
            {
              groupId: 'MapGroup',
              layerId: 'pointLayer',
              payload: drawData,
            },
          ],
        },
      ],
      () => {
        console.log(
          '绘制完成了',
          window?.LFTViewer?.getAllOverlays('pointLayer', 'MapGroup'),
        );
        let temp1 = window?.LFTViewer?.getAllOverlays('pointLayer', 'MapGroup');
        Object.values(temp1).forEach((item) => {
          item._lft.on('click', (e) => {
            const { payload } = item;
            console.log(e, payload);
          });
          item._lftLabel.on('click', (e) => {
            const { payload } = item;
            console.log(e, payload);
          });
        });
      },
    );
  };
  useEffect(() => {
    // console.log('viewer', window.LFTViewer);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'createLayer',
              groupId: 'MapGroup',
              layerId: 'pointLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('创建完成了');
        drawFun();
      },
    );
    return () => {
      clearFun();
    };
  }, []);
  return <></>;
};
